﻿(function(Mui){
	if(!Mui){
		return;
	}
	
	Mui.use('Mui.util.Viewport,Mui.util.Tab,Mui.util.AjaxTree',function(Mui){
	
		Mui.util.MainView=Mui.extend(Mui.util.Viewport,{
			title:'MUI Docs',
			items:{
				top:{
					height:60,
					renderTo:'top'
				},
				left:{
					renderTo:'left',
					width:200,
					hasColl:false,
					split:true
				},
				/* right:{
					width:200,
					hasColl:false,
					split:true,
					title:'Discuss'
				}, */
				center:{
					style:'margin-right:5px;'
				},
				bottom:{
					height:31,
					renderTo:'foot'
				}
			},
			createTabs:function(){
				if(this.tabs){
					return;
				}
				this.tabs=new Mui.util.Tab({
					autoRender:false,
					tabs:[{
						title:'说明'
					}]
				});
				this.getCMP().add(this.tabs,true);
				var p=new Mui.util.Panel({
					hasTitle:false,
					hasHead:false,
					type:'loader',
					style:'border:none',
					url:'main.html?'+(new Date())
				});
				
				this.tabs.add(p,true);
				
			},
			createMenuTree:function(){
				if(this.tree){
					return;
				}
				// var data=this.createTreeData();
				this.tree=new Mui.util.AjaxTree({
					autoRender:false,
					autoLoad:true,
					// showRoot:false,
					url:'menu.html',
					title:this.title,
					root:{text:'Mui',value:'Mui'},
					listeners:{
						'nodeselected':{
							fn:function(e){
								var node=e.eventData.node;
								this.openMenu(node);
							},
							scope:this
						}
					}
				});
				this.getLMP().add(this.tree,true);
			},
			openMenu:function(node){
				if(node.value){
					var tabs=this.tabs;
					if(tabs.hasTab(node._id)){
						tabs.setActive(tabs.getIndexById(node._id));
					}else{
						tabs.addTab({
							title:node.value,
							id:node._id
						},true);
						/* var p=new Mui.util.Panel({
							// hasTitle:false,
							// hasHeader:false,
							hasColl:true,
							title:node.value,
							type:'loader',
							hasFoot:false,
							scope:this,
							style:'border:none;',
							hasTopbar:true,
							url:node.value.toLowerCase()+'.html'
						}); */
						
						var p=this.createPanel(node.value,node.value.toLowerCase()+'.html');
						p.node=node;
						tabs.add(p,true);
					}
				}
			},
			createPanel:function(title,url){
				return new Mui.util.Panel({
					hasColl:true,
					title:title,
					type:'loader',
					hasFoot:false,
					scope:this,
					style:'border:none;',
					hasTopbar:true,
					url:url
				});
			},
			createTPTBar:function(){
				return [];
			},
			initEvent:function(){
				var _this=this;
				$('.mui-sup-sub').live('click',function(){
					var tag=$(this).attr('tag');
					_this.openMenu({
						isLeaf:true,
						_id:tag,
						value:tag
					})
				});
			},
			init:function(){
				Mui.util.MainView.superclass.init.call(this);
				this.createTabs();
				this.createMenuTree();
			},
			initComponent:function(){
				Mui.util.MainView.superclass.initComponent.call(this);
			}
		});
		
		var createProperty=function(property,title){
			var html=[];
			if(property&&property.length){
				html.push('<h3>'+title+'：</h3>');
				html.push('<div class="desc">');
				for(var i=0,len=property.length;i<len;i++){
					var p=property[i];
					html.push('<div  class="desc-item">');
					html.push('<div><em>'+p.name+'：</em><span>'+p.desc+'</span></div>');
					html.push('<div><strong>类型：</strong>'+p.type+'</div>');
					html.push('<div><strong>默认值：</strong>'+(p.def||'空')+'</div>');
					html.push('</div>');
				}
				html.push('</div>');
			}
			return html.join('');
		};
		var createFn=function(fn){
			var html=[];
			if(fn&&fn.length){
				html.push('<h3>方法：</h3>');
				html.push('<div class="desc">');
				for(var i=0,len=fn.length;i<len;i++){
					var f=fn[i];
					html.push('<div class="desc-item"><em>'+f.name+'：</em>');
					html.push('<div><strong>说明：</strong></div><p>'+(f.desc||'')+'</p>');
					
					if(f.param&&f.param.length){
						html.push('<div><strong>参数：</strong></div><p>');
						var j=0,lenj=f.param.length;
						while(j<lenj){
							var p=f.param[j];
							html.push('<div><span>'+p.name+'：</span><span>'+p.desc+'</span></div>');
							j++;
						}
						html.push('</p>');
					}else{
						html.push('<div><strong>参数：</strong><span>无</span></div>');
					}
					
					html.push('<div><strong>返回值：</strong><span>'+(f.ret||'无')+'</span></div>');
					if(f.retType){
						html.push('<div><strong>返回值类型：</strong><span>'+(f.retType||'无')+'</span></div>');
					}
					
					html.push('</div>');
					// html.push('</div>');
				}
				html.push('</div>');
			}
			return html.join('');
		};
		
		Mui.util.DocsRender=Mui.extend(Mui.util.Component,{
			data:null,
			render:function(){
				var cls=this.cls,data=this.data,el=this.getEl();
				el.addClass('page');
				var html=[];
				html.push('<h2>'+data.title+'</h2>');
				html.push('<div class="info">');
				html.push('<div><strong>Class：</strong>'+data.title+'</div>');
				html.push('<div><strong>SuperClass：</strong><a href="#" tag="'+data.superclass+'">'+data.superclass+'</a></div>');
				data.subclass=data.subclass||'';
				var sc=data.subclass.split(',');
				if(sc.length){
					html.push('<div><strong>SubClass：</strong>');
					
					var scs=[];
					for(var i=0,len=sc.length;i<len;i++){
						scs.push('<a class="mui-sup-sub" href="#" tag="'+sc[i]+'">'+sc[i]+'</a>');
					}
					html.push(scs.join('；'));
				}
				html.push('</div>');
				html.push('</div>')
				
				if(data.desc){
					html.push('<h3>说明：</h3>');
					html.push('<div class="desc"><p>'+data.desc+'</p></div>');
				}
				
				el.append(html.join(''));
				
				el.append(createProperty(data.private,'私有属性'));
				el.append(createProperty(data.public,'公共属性'));
				
				el.append(createFn(data.fn));
				// el.append(createEvent(data.event));
				
			}
		});

	});
})(Mui);

